<template>
  <a-modal
    title="编辑商品详情"
    width="60%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div style="font-weight: bolder;margin-left: 12px">选择图集:</div>
    <div style="display: flex; flex-wrap: wrap; width: 100%; overflow-wrap: break-word;">
      <a-card hoverable v-for="(item,index) in record.images" :key="index" style="flex: 0 0 30%; margin: 10px;">
        <img
          slot="cover"
          alt="example"
          :src="item.url"
          style="height: 200px"
        />
        <template slot="actions" style="display: flex;justify-content: space-between">
          <a-checkbox v-model="item.choice"></a-checkbox>
          <a-checkbox v-model="item.mainImage" @change="onChange(item)">默认图</a-checkbox>
        </template>
      </a-card>
    </div>
    <div style="width: 100%">
      <a-row style="margin-top: 24px;margin-left: 12px">
        <span>
          <span style="font-weight: bolder">设置折扣:</span>
          <span style="margin-left: 12px">满</span>
          <a-input-number style="margin-left: 4px" id="inputNumber" v-model="record.discountItem" :min="1" />
          <span style="margin-left: 4px">件</span>
        </span>
        <span style="margin-left: 24px">打</span>
        <a-input-number v-model="record.discount" style="margin-left: 4px" :min="0" :max="10" :step="0.01" />
        <span style="margin-left: 4px">折</span>
        <span style="font-weight: bolder;margin-left: 24px">可叠加优惠: </span>
        <a-checkbox v-model="record.discountOffers"></a-checkbox>
      </a-row>
      <a-row style="margin-top: 24px;margin-left: 12px">
        <span>
          <span style="font-weight: bolder">设置满减:</span>
          <span style="margin-left: 12px">满</span>
          <a-input-number style="margin-left: 4px" id="inputNumber" v-model="record.fullItem" :min="1" />
          <span style="margin-left: 4px">元</span>
        </span>
        <span style="margin-left: 24px">减</span>
        <a-input-number style="margin-left: 4px" v-model="record.full" :min="0" :step="0.01" />
        <span style="margin-left: 4px">元</span>
        <span style="font-weight: bolder;margin-left: 24px">可叠加优惠: </span>
        <a-checkbox v-model="record.fullOffers"></a-checkbox>
      </a-row>
      <a-row style="margin-top: 24px;margin-left: 12px">
        <span style="font-weight: bolder">设置会员价:</span>
        <span v-for="(item,index) in record.memberList" :key="item.id">
          <span style="margin-left: 12px">{{ item.name }}:</span>
          <a-input-number style="margin-left: 4px" id="inputNumber" v-model="item.value" :min="1" />
        </span>
      </a-row>
    </div>
  </a-modal>
</template>
<script>
import { getAction } from '../../../../api/manage'

export default {
  props: {},
  data() {
    return {
      record: {},
      visible: false,
    }
  },
  methods: {
    initRecord(record) {
      this.record = {}
      this.record = record
      this.visible = true
    },
    handleOk() {
      this.visible = false
      console.log()
    },
    handleCancel() {
      this.visible = false
      this.$emit('ok')
    },
    onChange(item) {
      let list = this.record.images
      list.forEach(it => {
        if (it.url !== item.url) {
          it.mainImage = false
        }
      })
      this.record.images = list
    }
  }
}

</script>

<style>

</style>